<template>
  <div class="container">
    <div class="banner">
      <img v-lazy="pageImgObject.pic01" alt="">
      <span id="share" @click="shareForWechat" v-text="''">分享</span>
    </div>
    <div class="container" v-for="(MainItem,index) in pageGoodsIdArr" :key="index">
      <div class="topic-title">
        <img v-lazy="pageImgArray[index]" alt="">
        <div class="move" :class="{'left-style':index%2!=0}" :style="{top:index==0?'0.95rem':''}"><img v-lazy="pageImgObject.pic13" alt=""></div>
        <div class="self-goods" :class="{'left-style':index%2!=0}" 
          :style="{top:index==0?'1.15rem':''}"  @click="goForGoodsDetail(item.goods_id)"
          v-for="(item,idx) in MainItem.slice(0,1)" :key="idx" 
        >
          <img :src="item.img640_url" alt="">
          <span>榜单限时价:<i>￥{{item.flash_price}}</i></span>
        </div>
      </div>
      <div class="goods-wrapper" :style="{background:bgColorArray[index]}">
        <div class="goods-menu" v-if="MainItem.length">
          <ScrollItem :parentData="item" :styleData="childStyle" @childEvent="goForGoodsDetail" v-for="(item,index) in MainItem.slice(1)" :key="index"/>
        </div>
      </div>
    </div>
    <div class="more" v-if="moreData.specialArrList.length">
      <div><img v-lazy="pageImgObject.pic12" alt=""></div>
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
    </div>
  </div>
</template>

<script>
  import ScrollItem from 'components/GoodsItems/scrollItem.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  export default {
    components:{ ScrollItem, SpecialItem },
    data(){
      return{
        pageImgObject:{},
        pageImgArray:[],
        bgColorArray:[],
        childStyle:{width:'2rem'},
        pageGoodsIds:[
          1600187,1600161,1600163,1600189,1600199,1600165,1606373,1606375,1598019,1598021,1606853,1598025,1600183,1543051,1603421,1603425,1600151,1600191,
          1598027,1598029,1598031,1598033,1598035,1598037,1600169,1600181,1600185,1600167,1600193,1600195,1272237,1598063,1598065,1598067,1272243,1272235,
          1600171,1600173,1600175,1600197,1600177,1600179,1598039,1598041,1598043,1598045,1598047,1598049,1603423,1600159,1600157,1604641,1600155,1600153,
          1598051,1598053,1598055,1598057,1598059,1598061
        ],
        pageGoodsIdArr:[],
        moreData:{
          reqestIds:'71789,71865,71777,71773,71767,71775,71767,71853,71955,71889,71867,71871,71873,71895,71425,71601,71803,71805,71807,71859,71809,71887,71659,71879,71883,71923,71885,71877,71921',
          specialArrList:[]
        },
        requestLock:false,//请求锁用于上啦加载
        totalPage:2,//分页总数
        currentPage:1,//默认第一页
      } 
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.pageImgObjectFunc();
      let firstReqIds=this.pageGoodsIds.slice(0,30).toString();
      this.getGoodsAction(firstReqIds);
    },
    mounted(){
      let that=this;
      window.addEventListener('scroll',function(){
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;//已经滚动到上面的页面高度
        let scrollHeight =  Math.max(document.body.scrollHeight,document.body.offsetHeight);//页面高度
        let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;//浏览器窗口高度
        //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
        if (scrollHeight -scrollTop - windowHeight <= 50 && !that.requestLock) {
          that.requestLock=true;//添加锁定
          let secondReqIds=that.pageGoodsIds.slice(30).toString();
          that.getGoodsAction(secondReqIds);//请求数据
          that.moreSpecial();
        }
      },false)
    },
    methods:{
      pageImgObjectFunc(){
        this.pageImgObject={
          pic01:require('../../../assets/img/fashionRank/fashionRank01.jpg'),
          pic12:require('../../../assets/img/fashionRank/fashionRank12.jpg'),
          pic13:require('../../../assets/img/fashionRank/fashionRank13.gif'),
        };
        this.pageImgArray=[
          require('../../../assets/img/fashionRank/fashionRank02.jpg'),
          require('../../../assets/img/fashionRank/fashionRank03.jpg'),
          require('../../../assets/img/fashionRank/fashionRank04.jpg'),
          require('../../../assets/img/fashionRank/fashionRank05.jpg'),
          require('../../../assets/img/fashionRank/fashionRank06.jpg'),
          require('../../../assets/img/fashionRank/fashionRank07.jpg'),
          require('../../../assets/img/fashionRank/fashionRank08.jpg'),
          require('../../../assets/img/fashionRank/fashionRank09.jpg'),
          require('../../../assets/img/fashionRank/fashionRank10.jpg'),
          require('../../../assets/img/fashionRank/fashionRank11.jpg')
        ],
        this.bgColorArray=[
          '#570604','#043568','#994306','#351A81','#366BE5',
          '#2B4641','#E48607','#DB3534','#03736F','#3E4443'
        ]
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(list){
        if(this.currentPage>this.totalPage){ return false }
        getGoodsListApi(list).then(res =>{
          if(res.code==200 && res.status=='success'){
            this.currentPage++;//分页数+1
            let limitTop = 5,perPageNum=6,tempData=[];
            for (let index = 0; index < limitTop; index++) {
              let element = res.data.slice(index*perPageNum,(index+1)*perPageNum);
              tempData.push(element);
            }
            this.pageGoodsIdArr=this.pageGoodsIdArr.concat(tempData);
            this.requestLock=false;//解除锁定
          }
        });
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").indexOf(e)>-1;
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>
<style lang="less">
html,body{
  background: #2B3329;
}
</style>

<style lang="less" scoped>
.banner{
  position: relative;
  #share{
    width: 1.05rem;
    height: 0.5rem;
    position: absolute;
    top: 0.2rem;right: 0;
  }
}
.container{
  .topic-title{
    position: relative;
    font-family: '微软雅黑';
    font-size: 0.24rem;
    color: #ffffff;
    text-align: center;
    .move{
      width: 1.6rem;
      height: 0.3rem;
      position: absolute;
      top: 1.45rem;left:2.1rem;
      &.left-style{
        left: 3.2rem;
        top: 1.4rem;
      }
    }
    .self-goods{
      width: 2.4rem;
      height: 3rem;
      position: absolute;
      top: 1.65rem;right:0.45rem;
      &.left-style{
        left: 0.42rem;
        top: 1.6rem;
      }
      span {
        display: inline-block;
        width: 100%;
        height: 0.4rem;
        line-height: 0.36rem;
        margin-top: 0.1rem;
        background: #2B3329;
      }
      i{
        font-style: normal;
        font-size: 0.3rem;
        font-weight: 600;
      }
    }
  }
  .goods-wrapper{
    margin: 0 0.15rem;
    padding: 0.2rem;
    background: #600003;
    .goods-menu{
      display: flex;
      flex-wrap: nowrap;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .goods-menu::-webkit-scrollbar{width: 0;height: 0}
  }
}
</style>